<template>
  <div id="app">
    <router-view v-if="isRouterAlive" />
  </div>
</template>

<script>
// import { getToken } from '@/utils/auth';
export default {
  name: 'App',
  provide() {
    return {
      reload: this.reload
    }
  },
  data() {
    return {
      count: 0,

      percent: '',
      imglength: 0,
      isRouterAlive: true,
      gap_time: 0,
      beforeUnload_time: 0,
      time: null,
      timeCount: 0
    }
  },

  watch: {
    count(val) {
      if (val === this.imglength) {
        setTimeout(() => {
          document.body.removeChild(document.getElementById('Loading'))
        }, 1000)
      }
    }
  },
  mounted() {
    this.preload()
  },
  destroyed() {

  },
  methods: {

    preload: function() {
      const imgs = [
        require('./assets/images/logo.png'),
        require('./assets/images/city.png'),
        require('./assets/images/head.png'),
        require('./assets/images/left1.png'),
        require('./assets/images/anhui.png'),
        require('./assets/images/bg.png'),
        require('./assets/images/boxslider.png'),
        require('./assets/images/centerTitle.png'),
        require('./assets/images/circle.png'),
        require('./assets/images/ck.png'),
        require('./assets/images/headtitle.png'),
        require('./assets/images/kc.png'),
        require('./assets/images/pageblue.png'),
        require('./assets/images/pageyellow.png'),
        require('./assets/images/star.png'),
        require('./assets/images/sy.png'),
        require('./assets/images/tuoyuan.png')
      ]
      this.imglength = imgs.length
      for (const img of imgs) {
        const image = new Image()
        image.src = img
        image.onload = () => {
          this.count++
          // 计算图片加载的百分数，绑定到percent变量
          const percentNum = Math.floor((this.count / this.imglength) * 100)
          this.percent = `${percentNum}%`
          document.getElementById('_bar').innerHTML = this.percent
        }
        // image.onload();
      }
    },
    // 刷新页面
    reload() {
      this.isRouterAlive = false
      this.$nextTick(function() {
        this.isRouterAlive = true
      })
    }
  }
}
</script>
<style lang="scss">
#app {
    font-size: 14px;
}
</style>
